<script setup lang="ts">
import Taro, { useRouter } from "@tarojs/taro";

import ByIcon from "@/components/ui/ByIcon.vue";
import ByButton from "@/components/ui/ByButton.vue";
import ByEmpty from "@/components/ui/ByEmpty.vue";

import ApiTicket from "@/api/ticket";
import useEnum from "@/hooks/useEnum";
import useFetch from "@/hooks/useFetch";

import { ticketOptions } from "@/utils/dictionary";
import CouponEtime from "@/components/common/CouponEtime.vue";
import { computed } from "vue";

const { params } = useRouter();

// 购买权益包详情
const { data, refresh } = useFetch<any>(ApiTicket.userTicketDetail, {
  showLoading: true,
  defaultParams: { sn: params.sn },
  afterFetch: (res) => res.detail,
});

// 票券状态
const { get } = useEnum(ticketOptions);

// 撤销转赠
const { loading, run: submitCancelShare } = useFetch(
  ApiTicket.userTicketCancelShare,
  {
    immediate: false,
    onSuccess() {
      Taro.showToast({ title: "撤销成功" });
      refresh();
    },
  }
);

const handleCancel = async () => {
  const { confirm } = await Taro.showModal({
    title: "确定撤销转赠？",
  });

  if (confirm) submitCancelShare({ sns: params.sn });
};

const getDateProps = computed(() => {
  if (data.value) {
    const { act_info, etime_info } = data.value;
    const flag = etime_info.etime_type === 3;

    return {
      start: flag ? act_info.start_time : etime_info.start_time,
      end: flag ? act_info.end_time : etime_info.end_time,
    };
  }
  return { start: "", end: "" };
});
</script>

<template>
  <view :class="['min-h-screen p-6', { 'flex-center': !data && !loading }]">
    <template v-if="data">
      <view class="rounded-lg p-5 bg-primary text-dark">
        <view class="text-lg">{{ data?.ticket_info.ticket_title }}</view>

        <view class="text mt-3">票号：{{ data?.sn }}</view>
        <view class="text mt-3">状态：{{ get(data?.status)?.name }}</view>
        <view class="text mt-3" v-if="data?.status == 5">
          接收人：{{ data?.to_user_name }}
        </view>
        <view class="text mt-3">活动：{{ data?.act_info.title }}</view>
        <view class="text mt-3"
          >场次：
          <CouponEtime v-bind="getDateProps" />
        </view>
      </view>

      <navigator
        class="mt-3 px-4 py-3 rounded-full flex items-center justify-between bg-primary text-dark"
        :url="`/packageActivity/pages/activity/detail?act_id=${data?.act_id}`"
      >
        <text>活动详情</text>
        <ByIcon name="ArrowRight" />
      </navigator>

      <!-- <view v-if="data">
        <PopupMerchant :sn="data.sn" is-verified />
      </view> -->

      <view class="flex-center mt-10 text-center" v-if="data?.status == 4">
        <ByButton
          class="w-1/2 bg-dark mr-2"
          :loading="loading"
          :to="`share?batchNum=${data?.batch_num}&actId=${data?.act_id}`"
          >分享
        </ByButton>

        <ByButton class="w-1/2 bg-dark" :loading="loading" @tap="handleCancel"
          >撤销转赠
        </ByButton>
      </view>
    </template>

    <ByEmpty v-else-if="!loading" />
  </view>
</template>

<style lang="less">
page {
  background: linear-gradient(to bottom, #fef7ee, #dec2a0);
}
</style>
